<template>
	<div class="exam_subject_item" :id="anchor">
		<div class="head">
			<span>{{ data.score | formatDecimal(1) }}分</span>
			<em>{{ sIndex }}、</em>
			<h4 v-html="data.title"></h4>
		</div>
		<template v-if="data.subjectsType === '1'">
			<el-radio-group v-model="data.answer" :disabled="disabled" v-removeAriaHidden:radio>
				<el-radio v-for="(item, index) in data.options" :key="index" :label="item.tag">
					{{ item.tag }}
					<span class="option" v-html="item.contents"></span>
				</el-radio>
			</el-radio-group>
		</template>
		<template v-if="data.subjectsType === '2'">
			<el-checkbox-group v-model="data.answer" :disabled="disabled" v-removeAriaHidden:checkbox>
				<el-checkbox v-for="(item, index) in data.options" :key="index" :label="item.tag">
					{{ item.tag }}
					<span class="option" v-html="item.contents"></span>
				</el-checkbox>
			</el-checkbox-group>
		</template>
		<template v-if="data.subjectsType === '3'">
			<el-radio-group v-model="data.answer" :disabled="disabled" v-removeAriaHidden:radio>
				<el-radio label="1">正确</el-radio>
				<el-radio label="2">错误</el-radio>
			</el-radio-group>
		</template>
		<div class="analysis" v-if="isAnalysis">
			<span class="score">
				得分：
				<em :class="userAnswerStatus">{{ analysisData.score }}分</em>
			</span>
			<dl>
				<dt>考生答案：</dt>
				<dd :class="userAnswerStatus">{{ analysisData | answerFilter('answer') }}</dd>
			</dl>
			<dl>
				<dt>参考答案：</dt>
				<dd>{{ analysisData | answerFilter('standardAnswer') }}</dd>
			</dl>
			<dl>
				<dt>答案解析：</dt>
				<dd v-html="analysisData.subAnalysis"></dd>
			</dl>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
const getAnswerValue = (str) => {
	if (lodash.isArray(str)) {
		return str.join();
	} else if (str.isJSON()) {
		return JSON.parse(str).join();
	} else {
		return str;
	}
};
export default {
	props: {
		sIndex: Number,
		anchor: { type: String, default: '' },
		data: { type: Object, default: () => {} },
		disabled: { type: Boolean, default: false }
	},
	computed: {
		isAnalysis() {
			return !lodash.isEmpty(this.data.analysis);
		},
		analysisData() {
			return this.data.analysis || {};
		},
		userAnswerStatus() {
			let answer = this.analysisData.answer;
			let standard = this.analysisData.standardAnswer;
			let subjectsType = this.analysisData.subjectsType;
			if (subjectsType === '1') {
				return answer === standard ? 'right' : 'wrong';
			} else if (subjectsType === '2') {
				let answerString = getAnswerValue(answer);
				let standardString = getAnswerValue(standard);
				return answerString === standardString ? 'right' : 'wrong';
			} else if (subjectsType === '3') {
				return answer === standard ? 'right' : 'wrong';
			} else {
				return '';
			}
		}
	},
	filters: {
		answerFilter(data, field) {
			if (data.subjectsType === '1') {
				return data[field];
			} else if (data.subjectsType === '2') {
				let value = getAnswerValue(data[field]);
				return value !== data[field] ? value : '';
			} else if (data.subjectsType === '3') {
				if (data[field] === '1') {
					return '正确';
				} else if (data[field] === '2') {
					return '错误';
				}
			}
		}
	},
	watch: {
		isAnalysis(flag) {}
	}
};
</script>

<style lang="scss" scoped>
.exam_subject_item::v-deep {
	overflow: hidden;
	padding-bottom: 4px;
	border-top: dashed 1px #e4e7ed;
	&:has(.analysis) {
		padding-bottom: 0;
	}
	&:first-child {
		border-top: none;
	}
	.head {
		color: #606266;
		font-size: 18px;
		line-height: 1.75;
		font-weight: normal;
		overflow: hidden;
		padding: 12px 16px;
		h4 {
			display: inline;
			font-weight: normal;
		}
		em {
			float: left;
			color: #909399;
			font-style: normal;
		}
		span {
			float: right;
			color: #909399;
			margin-left: 10px;
		}
	}
	.el-radio-group,
	.el-checkbox-group {
		padding: 0 16px;
	}
	.el-radio,
	.el-checkbox {
		margin-bottom: 16px;
	}
	.el-radio__input.is-disabled {
		display: none;
		& + .el-radio__label {
			padding-left: 0;
		}
	}
	.el-checkbox__input.is-disabled {
		display: none;
		& + .el-checkbox__label {
			padding-left: 0;
		}
	}
	.el-radio__inner,
	.el-checkbox__inner {
		width: 16px;
		height: 16px;
	}
	.el-radio__inner::after {
		width: 6px;
		height: 6px;
	}
	.el-checkbox__inner::after {
		top: 0;
		width: 4px;
		height: 10px;
	}
	.el-radio__label,
	.el-checkbox__label {
		font-size: 18px;
		color: #606266 !important;
	}
	span.option {
		display: inline-block;
	}
	.analysis {
		font-size: 16px;
		padding: 12px 16px;
		background-color: #f9f9f9;
		span.score {
			float: right;
			display: flex;
			align-items: center;
			margin-left: 10px;
			em {
				font-style: normal;
				&.wrong {
					color: #f56c6c;
				}
				&.right {
					color: #67c23a;
				}
			}
		}
		dl {
			display: flex;
			align-items: flex-start;
			line-height: 30px;
		}
		dt {
			flex-shrink: 0;
		}
		dd {
			flex: 1;
			overflow: hidden;
			&.wrong {
				color: #f56c6c;
			}
			&.right {
				color: #67c23a;
			}
		}
	}
}
@media screen and (max-width: 768px) {
	.exam_subject_item::v-deep {
		.head {
			font-size: 16px;
		}
		.el-radio__label,
		.el-checkbox__label {
			font-size: 16px;
		}
	}
}
</style>
